みなさんWEB開発をする際はどのエディターを使用していますか？私はAtomを使って開発をしています。そこで今回はAtomユーザーに向けて実際に私が開発する際に使用しているプラグインを9つ紹介したいと思います。
おすすめのプラグイン
japanese-menu
URL：https://atom.io/packages/japanese-menu
japanese-menuはAtomを日本語化するプラグインです。インストールした時は英語になっているかと思いますが、このプラグインでAtomを日本語化することができます。
file-icons
URL:https://atom.io/packages/file-icons
file-iconsはファイルのアイコンをカラフルにしてくれるプラグインです。ファイルの拡張子ごとにアイコンがつくので、視覚的に見やすくなります。
minimap
URL：https://atom.io/packages/minimap
minimapは画面の右に今開いているファイルを全画面に表示してくれるプラグインです。構築が進むと記述するコードの量も増えてきます。いちいちスクロールするのが大変ですが、minimapを使うと任意に位置まですぐにスクロールすることができます。
color-picker
URL：https://atom.io/packages/color-picker
color-pickerは色をエディター上で視覚的に選ぶことができます。通常色は色コードで記述しますが、color-pickerを使うことでパネル上で色を選択することができます。ショートカットは「Command + Shift + C」です。
pigments
URL：https://atom.io/packages/pigments
pigmentsは色コードに色をつけてくれるプラグインです。視覚的に色を見ることができるのでその色コードがどんな色なのか一目でわかります。
highlight-column
URL：https://atom.io/packages/highlight-column
highlight-columnは字下げ(インデント)をわかりやすくしてくれるプラグインです。しっかりとインデントすることで綺麗なコードになります。コードは誰が見てもわかるように綺麗に書くようにしましょう。
selection-highlight
URL：https://atom.io/packages/selection-highlight
selection-highlightでは選択したテキストをダブルクリックするとその単語がハイライトされるプラグインです。
emmet
URL：https://atom.io/packages/emmet
emmetはコードを書く上で覚えておくと開発速度がかなり上がります。例えば.headerと入力すると
に変換されます。またpタグでクラス名をtextとしたい場合はp.textで変換されます。
emmetは「Enter」の代わりに「Command + Shift + E」を押すと変換されます。これを覚えるとタイピングをする回数がへるので、タイピングミスなどの防止にも繋がります。
まとめ
いかがだったでしょうか？今回紹介したプラグインは私が現場で使っているものなので、実用性はかなりあるかと思います。これらのプラグインを導入して、素早い開発をできるようになりましょう。
弊社では、そうしたツールを活かして、素早い構築を心がけています。短期間で高品質なホームページをお求めの方はぜひ、弊社Esolabにご依頼ください。
